<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
        }
        #app{
            width: 1000px;
            margin: 0 auto;
            display: flex;
        }
        #a{
            width: 200px; 
            margin-left: 20px;
        }
        ol>li{
            line-height: 35px;
            display: flex;
            justify-content: right;
        }
        #b{
            line-height: 30px;
            width: 800px;
            margin-top: 17px;
        }
        #b>div{
          display: flex;
          align-items: center;
          height: 35px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="a">
            <ol>
                <li>用户名:</li>
                <li>密码:</li>
                <li>年龄:</li>
                <li>喜欢的颜色:</li>
                <li>资料完整度:</li>
                <li>性别:</li>
                <li>爱好:</li>
                <li>阶段:</li>
                <li>备注:</li>
            </ol>
        </div>
        <div id="b">
            <div>
              <input type="text" v-model.trim="userName"> {{ userName }}
              </div>
              <div>
                <input type="text" v-model.lazy="password"> {{ password }}
              </div>
              <div>
                 <input type="text" v-model.number="age"> {{ age }}
              </div>
              <div>
                <input type="color" v-model="color"> {{ color }}
              </div>
              <div>
                 <input type="range" min="0" max="100" v-model="rating"> {{ rating }}
              </div>
              <div>
              
                <input type="radio"  name="sex" v-model="sex" value="男"/>男
                <input type="radio"  name="sex" v-model="sex" value="女"/>女  --- {{ sex }}
              </div>
          
              <div>
                
                <input type="checkbox"  name="hobby" v-model="hobby" value="🏀"/>🏀 
                <input type="checkbox"  name="hobby" v-model="hobby" value="⚽️"/>⚽️ 
                <input type="checkbox"  name="hobby" v-model="hobby" value="🏓️"/>🏓️
                <input type="checkbox"  name="hobby" v-model="hobby" value="🎱"/>🎱
                <input type="checkbox"  name="hobby" v-model="hobby" value="🏸️"/>🏸️
                - {{ hobby }}
              </div>
              <div>
                
                <select v-model="lesson">
                  <option value="" disabled>请选择</option> <!-- 兼容 -->
                  <option value="1阶段">1阶段</option>
                  <option value="2阶段">2阶段</option>
                  <option value="3阶段">3阶段</option>
                </select> -- {{ lesson }}
              </div>
              <div>
                
                <textarea v-model="note"></textarea>
                {{ note }}
              </div>
              <input type="checkbox" v-model="flag"> 同意*****协议 -- {{ flag }}
        </div>
        
      </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return{
                userName:'',
                password:'',
                age:20,
                rating:50,
                sex:'男',
                hobby:['🏀'],
                lesson:'3阶段',
                note:'',
                flag:false
            }
        }
    }).mount('#app')
</script>
</html>